import { Component, OnInit } from '@angular/core';

export interface Person {
    key: string;
    name: string;
    subscibe: string;
    time: string;
}

@Component({
    selector: 'equip-maintenance-record',
    styleUrls: ['./components.less'],
    template: `
        <div class="maintenanceRecordContainer">
            <div class="record-bar">
                <span>选择日期：</span>
                <nz-range-picker [(ngModel)]="date" (ngModelChange)="onChange($event)"></nz-range-picker>
                <span><button nz-button nzType="primary">查询</button></span>
            </div>
            <div class="record-table">
                <nz-table #basicTable [nzData]="listOfData" nzSize="middle"  [nzShowSizeChanger]="true" [nzShowQuickJumper]="true" [nzPageSize]="5">
                    <thead>
                        <tr>
                            <th>维护时间</th>
                            <th>维护人员</th>
                            <th>维护简述</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let data of basicTable.data">
                            <td>{{ data.time }}</td>
                            <td>{{ data.name }}</td>
                            <td>{{ data.subscibe }}</td>
                            <td class='option-td' >
                                <button nz-button nzType="primary" (click)="onOptionTdClick(data)">查看</button>
                            </td>
                        </tr>
                    </tbody>
                </nz-table>
            </div>
        </div>
        <div>
            <nz-modal [(nzVisible)]="isVisible" nzTitle="维护详情" (nzOnCancel)="handleCancel()" [nzCentered]="true" nzWidth='600px'>
                <ng-container *nzModalContent>
                    <div class="record-modal">
                        <div>
                            <span>维护人员：</span><span>{{modal_data.person}}</span>
                            <span>维护时间：</span><span>{{modal_data.time}}</span>
                        </div>
                        <div>
                            <span>维护类型：</span><span>故障维护</span>
                            <span>维护结果：</span><span>设备正常</span>
                        </div>    
                    </div>
                </ng-container>
                <ng-container *nzModalFooter> 
                    <div [style]="{textAlign:'center'}"><button nz-button (click)="handleCancel()" >关闭</button></div>
                </ng-container>

            </nz-modal> 
        </div>
    `
})

export class MaintenanceRecordComponent implements OnInit {

    listOfData: Person[] = [];
    date = null;
    isVisible = false;
    modal_data = {
        time: "",
        person: "",
        type: "",
        result: ""
    }
    onChange(result: Date[]): void {
        console.log('onChange: ', result);
    }
    handleCancel(): void {
        this.isVisible = false
    }
    onOptionTdClick(data) {

        console.log(data)
        this.modal_data.time = data.time
        this.modal_data.person = data.name
        this.isVisible = true
    }
    ngOnInit(): void {
        for (let i = 0; i < 50; i++) {
            this.listOfData.push({
                key: i.toString(),
                name: '张工' + i,
                subscibe: '日常维护',
                time: new Date().toLocaleString()
            })
        }
    }
}